<template>
    <transition name='fade'
      @after-leave='afterLeave'
    >
        <div class="shade"
          id='showModule'
          v-show="visible"
        >
            <div class="module">
                <p class="title">{{title}}</p>
                <p class="message">{{content}}</p>
                <div class="module-button box vertical-center">
                    <p class="cancle confirm" 
                      v-if='cancleText'
                      @click="cancle"
                    >{{cancleText}}</p>
                    <p class="confirm box-1 aglin-center"
                      :style="'color:' + confirmColor"
                      @click="confirm"
                    >{{confirmText}}</p>
                </div>
            </div>
        </div>
    </transition>
</template>
<script>
export default {
    data() {
        return {
            visible: false,
            title: '',
            content: '',
            cancleText: '取消',
            confirmText: '确定',
            confirmColor: '#000000'
        }
    },
    methods: {
        cancle() {
            this.$emit('cancle')
        },
        confirm() {
            this.$emit('confirm')
        },
        afterLeave() {
            this.$emit('close')
        }
    }
}
</script>
<style lang="less" scoped>
.shade{
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.5);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
    .module{
        width: 65%;
        padding-top: .5rem;
        background: #fff;
        border-radius: 5px;
        -webkit-box-shadow: 5px 5px 5px rgba(0,0,0,.5);
        box-shadow: 0 0 20px 5px rgba(0,0,0,.2);
        position: absolute;
        top: 30%;
        left: 17.5%;
        overflow: hidden;
        .title{
            font-size: 1.2rem;
            text-align: center
        }
        .message{
            padding: 0.5rem 2rem;
            box-sizing: border-box;
            font-size: 0.9375rem;
            color: #4a4a4a;
            text-align: center
        }
        &-button{
            border-top: 1px solid #cccccc;
            .cancle{
                border-right: 1px solid #cccccc;
                width: 50%
            }
            .confirm{
                height: 2.5rem;
                line-height: 2.5rem;
                font-size: 1.2rem;
                text-align: center;
            }
        }
    }
}
</style>
